<template>
	<view class="life-container">
		<!-- 固定头部区域 -->
		<view class="fixed-header">
			<!-- 顶部导航标签 -->
			<view class="nav-tabs">
				<text :class="['tab-item', activeTab === 'all' ? 'active' : '']" @click="switchTab('all')">直播中</text>
				<text :class="['tab-item', activeTab === 'following' ? 'active' : '']"
					@click="switchTab('following')">直播预告</text>
			</view>

			<!-- 筛选选项 -->
			<!-- <view class="filter-options">
                <text :class="['filter-item', activeFilter === 'latest' ? 'active' : '']"
                    @click="switchFilter('latest')">最新发布</text>
                <text :class="['filter-item', activeFilter === 'hot' ? 'active' : '']"
                    @click="switchFilter('hot')">热门推荐</text>
                <text :class="['filter-item', activeFilter === 'replies' ? 'active' : '']"
                    @click="switchFilter('replies')">最新回复</text>
            </view> -->
		</view>

		<!-- 可滚动的内容区域 -->
		<scroll-view class="scrollable-content" scroll-y="true">
			<view class="content-grid">
				<view class="content-card" v-for="(item, index) in contentList" :key="index" @tap="toDetail(item)">
					<view class="content-top">
						<view class="line-box">
							<view class="line" v-for="(line, index) in lines" :key="index"
								:style="{ animation: `float ${6 + index * 1.5}s ease-in-out infinite` }"></view>
						</view>
						<view class="content-city">
							{{item.city}}
						</view>
					</view>

					<image class="card-image" :src="item.image" mode="aspectFill"></image>
					<view class="card-info">
						<text class="card-title">{{ item.title }}</text>
						<view class="user-info">
							<image class="user-avatar" :src="item.userAvatar" mode="aspectFill"></image>
							<text class="user-name">{{ item.userName }}</text>
							<text class="view-count">{{ item.viewCount }}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 'all',
				activeFilter: 'latest',
				lines: [1, 2, 3],
				// 全部内容列表
				allContentList: [{
						image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250117/b09ea0298816daf09c74ad7ab31f90d9.jpg',
						title: '紫砂壶的矿有哪些呢，给你看看从矿到壶到30倍...',
						userAvatar: '../static/img/album.png',
						userName: '逸尘轩·紫砂文化',
						viewCount: '293',
						city:'广东广州'
					},
					{
						image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250117/33f1ecca4ce0beaa58077b8cbe0395d6.jpg',
						title: '一图带您了解蒜香橄榄油意面有什么🍝其被誉...',
						userAvatar: '../static/img/album.png',
						userName: '意面姐姐',
						viewCount: '17',
						city:'广东深圳'
					},
					{
						image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250117/ef197f8f8c1c31eb174f16a00712178f.jpg',
						title: '【家庭是一个共生系统】你的改变能撼动全家...',
						userAvatar: '../static/img/album.png',
						userName: '心理咨询师小王',
						viewCount: '156',
						city:'广东佛山'
					},
					{
						image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
						title: '【自由肉肉】孩子的零食终于有着落了！今天教...',
						userAvatar: '../static/img/album.png',
						userName: '美食达人',
						viewCount: '89',
						city:'云南昆明'
					},
					{
						image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
						title: '一图带您了解蒜香橄榄油意面有什么🍝其被誉...',
						userAvatar: '../static/img/album.png',
						userName: '意面姐姐',
						viewCount: '17'
					},
					{
						image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
						title: '【家庭是一个共生系统】你的改变能撼动全家...',
						userAvatar: '../static/img/album.png',
						userName: '心理咨询师小王',
						viewCount: '156',
						city:'云南昆明'
					},
					{
						image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
						title: '【自由肉肉】孩子的零食终于有着落了！今天教...',
						userAvatar: '../static/img/album.png',
						userName: '美食达人',
						viewCount: '89',
						city:'云南昆明'
					},
					{
						image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
						title: '一图带您了解蒜香橄榄油意面有什么🍝其被誉...',
						userAvatar: '../static/img/album.png',
						userName: '意面姐姐',
						viewCount: '17',
						city:'云南昆明'
					},
					{
						image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
						title: '【家庭是一个共生系统】你的改变能撼动全家...',
						userAvatar: '../static/img/album.png',
						userName: '心理咨询师小王',
						viewCount: '156',
						city:'云南昆明'
					},
					{
						image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
						title: '【自由肉肉】孩子的零食终于有着落了！今天教...',
						userAvatar: '../static/img/album.png',
						userName: '美食达人',
						viewCount: '89',
						city:'云南昆明'
					}
				],
				// 关注内容列表
				followingContentList: [{
						image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
						title: '跟着大厨学做菜，一周美食精选合集',
						userAvatar: '../static/img/album.png',
						userName: '米其林三星主厨',
						viewCount: '521'
					},
					{
						image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
						title: '每日穿搭灵感 | 春季流行趋势解析',
						userAvatar: '../static/img/album.png',
						userName: '时尚博主小K',
						viewCount: '328'
					}
				],
				// 热门推荐列表
				hotContentList: [{
						image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
						title: '2024年最受欢迎的10道家常菜做法',
						userAvatar: '../static/img/album.png',
						userName: '美食频道官方',
						viewCount: '9999+'
					},
					{
						image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
						title: '春季养生必备，这些食材不要错过',
						userAvatar: '../static/img/album.png',
						userName: '中医养生堂',
						viewCount: '8526'
					}
				]
			}
		},
		computed: {
			// 根据当前选中的标签和筛选条件显示对应的内容列表
			contentList() {
				let list = this.activeTab === 'all' ? this.allContentList : this.followingContentList

				// 根据筛选条件处理列表
				switch (this.activeFilter) {
					case 'hot':
						return this.hotContentList
					case 'latest':
						return list
					case 'replies':
						// 这里可以根据回复数排序，这里简单返回原列表
						return list.slice().reverse()
					default:
						return list
				}
			}
		},
		methods: {
			// 切换标签页
			switchTab(tab) {
				this.activeTab = tab
				// 切换标签时重置筛选条件
				this.activeFilter = 'latest'
			},
			// 切换筛选条件
			switchFilter(filter) {
				this.activeFilter = filter
			},
			toDetail(item) {
				uni.navigateTo({
					url: `/pagesSocial/livesQuare/lives_detail`
				})
			}
		}
	}
</script>

<style lang="scss">
	.life-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background: #f5f5f5;

		.fixed-header {
			position: sticky;
			top: 0;
			left: 0;
			right: 0;
			z-index: 100;
			background: #fff;
			padding: 20rpx 20rpx 0;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

			.nav-tabs {
				display: flex;
				margin-bottom: 20rpx;

				.tab-item {
					margin-right: 30rpx;
					font-size: 32rpx;
					color: #666;
					padding: 10rpx 0;

					&.active {
						color: #333;
						font-weight: bold;
						position: relative;

						&::after {
							content: '';
							position: absolute;
							bottom: 0;
							left: 50%;
							transform: translateX(-50%);
							width: 40rpx;
							height: 4rpx;
							background: #2ed573;
							border-radius: 2rpx;
						}
					}
				}
			}

			.filter-options {
				display: flex;
				margin-bottom: 20rpx;
				flex-wrap: nowrap;
				overflow-x: auto;
				-webkit-overflow-scrolling: touch;
				padding-bottom: 10rpx;

				&::-webkit-scrollbar {
					display: none;
				}

				.filter-item {
					margin-right: 20rpx;
					padding: 10rpx 20rpx;
					font-size: 28rpx;
					color: #666;
					background: #f5f5f5;
					border-radius: 30rpx;
					white-space: nowrap;

					&.active {
						color: #fff;
						background: #2ed573;
					}
				}
			}
		}

		.scrollable-content {
			flex: 1;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
			padding: 20rpx;

			&::-webkit-scrollbar {
				display: none;
			}

			.content-grid {
				display: flex;
				flex-wrap: wrap;
				margin: 0 -10rpx;

				.content-card {
					width: calc(50% - 20rpx);
					margin: 10rpx;
					background: #fff;
					border-radius: 12rpx;
					overflow: hidden;
					box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
					position: relative;

					.card-image {
						width: 100%;
						height: 300rpx;
					}

					.card-info {
						padding: 20rpx;

						.card-title {
							font-size: 28rpx;
							color: #333;
							line-height: 1.4;
							margin-bottom: 10rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}

						.user-info {
							display: flex;
							align-items: center;

							.user-avatar {
								width: 40rpx;
								height: 40rpx;
								border-radius: 50%;
								margin-right: 10rpx;
							}

							.user-name {
								font-size: 24rpx;
								color: #666;
								flex: 1;
							}

							.view-count {
								font-size: 24rpx;
								color: #999;

								&::before {
									content: '';
									display: inline-block;
									width: 24rpx;
									height: 24rpx;
									background: url('../static/img/album.png') no-repeat;
									background-size: contain;
									vertical-align: middle;
									margin-right: 6rpx;
								}
							}
						}
					}
				}
			}
		}
	}

	.content-top {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		z-index: 9999;
		display: flex;
		align-items: center;
	}

	.line-box {
		display: flex;
		width: 50rpx;
		height: 50rpx;
		align-items: center;
		justify-content: center;
		background-color: #e64340;
		padding: 10rpx;

	}

	.line {
		width: 4rpx;
		height: 20rpx;
		background-color: #fff;
		margin: 0 2rpx;
		animation: float 3s ease-in-out infinite;
	}

	/* 定义竖线跳动到顶部的动画 */
	@keyframes float {
		0% {
			transform: translateY(0);
			/* 起始位置，底部 */
		}

		20% {
			transform: translateY(-10rpx);
			/* 向上跳 50px */
		}

		40% {
			transform: translateY(0);
			/* 向下 30px */
		}

		60% {
			transform: translateY(-10rpx);
			/* 向上跳 100px */
		}

		80% {
			transform: translateY(0);
			/* 向下 20px */
		}

		100% {
			transform: translateY(0);
			/* 返回底部 */
		}
	}

	.content-city {
		display: flex;
		align-items: center;
		background-color: #999;
		color: #fff;
		height: 50rpx;
		padding: 10rpx;
		font-size: 24rpx;
	}
</style>